<template>
	<view class="box">
	  <view
	    class="list-item"
	    @click="onClick(item._id)"
		v-if="item"
	  >
	    <view class="list-img">
	      <image
	        mode="aspectFill"
	        lazy-load='true'
	        :src="item.coverImgUrl"
	      />
	    </view>
		
	    <view class="list-title ellipsis">{{ item.title || item.name }} </view>
	    <view class="list-desc multi-ellipsis">{{ item.desc || '' }}</view>
	  </view>
	  </view>
</template>

<script>
	export default {
		props:['item'],
		data() {
			return {
				
			};
		},
		methods:{
				
			onClick(id){
				uni.navigateTo({
					url:'../../pages/index/singleSongList/singleSongList?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
.box{
		display: flex;
		justify-content: space-between;
}
.list-item {
	flex: 50%;
  width: 320rpx;
  margin-top: 40rpx;
  // float: left;
  &:nth-child(2n-1){
	  // margin-right: 40rpx;
  }
}

.list-item .list-img {
  width: 100%;
  height: 344rpx;
  border-radius: 15rpx;
  overflow: hidden;
}

.list-item .list-title {
  margin-top: 20rpx;
  font-size: 34rpx;
  color: #E6E7F2;
}

.list-item .list-desc {
  margin-top: 15rpx;
  font-size: 28rpx;
  color: #98A1BD;
}
</style>
